<template>
  <main>
    <div class="section-1">
      <div class="post">
        <h1>{{ h1Content }}</h1>
        <p>
          {{ pContent }}
        </p>
      </div>
      <a class="to-content-section" href="#">
        <img src="@/assets/svg/arrow-down.svg" alt="arrow-down" />
      </a>
    </div>
    <div class="section-2">
      <h2>{{ section2ContentHeading }}</h2>
      <div class="content">
        <div class="item-card" v-for="item in StdTechnologies" :key="item.key">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="section-3">
      <h2>{{ latestNewsTitle }}</h2>
      <div class="latest-news">
        <div class="news-item" v-for="item in latestNewsData" :key="item.key">
          <span>{{ moment(item.date).format("MMMM YYYY") }}</span>
          <span>
            {{ item.content }}
          </span>
        </div>
      </div>
      <div class="more-news">
        <img src="@/assets/svg/arrow-right.svg" alt="arrow-right" />
        <a href="#">{{ "more news" }}</a>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from "vue";
import moment from "moment";
const h1Content = ref(
  "Ecma International is an industry association dedicated to the standardization of information and communication systems"
);
const pContent = ref(
  "Ecma is driven by industry members to meet their needs, providing a healthy competitive landscape based on differentiation of products and services rather than technology models, generating confidence among vendors and users of new technology."
);
const section2ContentHeading = ref("Ecma standardization technologies");
const StdTechnologies = ref([
  {
    key: "1",
    name: "ECMAScript",
  },
  {
    key: "2",
    name: "ECMAScript modules for embedded systems",
  },
  {
    key: "3",
    name: "Acoustics",
  },
  {
    key: "4",
    name: "Product-related environmental attributes",
  },
  {
    key: "5",
    name: "Electromagnetic Compatibility and Electromagnetic Fields (EMC and EMF)",
  },
  {
    key: "6",
    name: "Programming languages",
  },
  {
    key: "7",
    name: "Office Open XML formats",
  },
  {
    key: "8",
    name: "Access systems and information exchange between systems",
  },
  {
    key: "9",
    name: "Information storage",
  },
  {
    key: "10",
    name: "Dart",
  },
  {
    key: "11",
    name: "Open XML Paper Specification (OpenXPS)",
  },
  {
    key: "12",
    name: "Product safety",
  },
  {
    key: "13",
    name: "Multimedia coding and communications",
  },
  {
    key: "14",
    name: "Close proximity electric induction data transfer",
  },
  {
    key: "15",
    name: "TCs which have accomplished their task",
  },
]);
const latestNewsTitle = ref("Latest news");
const latestNewsData = ref([
  {
    key: "1",
    date: "2021-08",
    content: "Ecma International approves new edition of ECMA-417 Standard",
  },
  {
    key: "1",
    date: "2021-07",
    content:
      "Ecma TC39 new Task Group dedicated to the security of the ECMAScript (JavaScript) language",
  },
  {
    key: "1",
    date: "2021-06",
    content:
      "Ecma recognition awards honour Carol Eidt, Jordan Harband and Toyoshige Nohnishi for their contributions and services to Ecma",
  },
  {
    key: "1",
    date: "2021-06",
    content: "Ecma International approves new standards",
  },
  {
    key: "1",
    date: "2021-06",
    content: "Ecma International welcomes new members",
  },
]);
</script>

<style lang="scss" scoped>
main {
  display: flex;
  flex-direction: column;
  .section-1 {
    width: 100%;
    height: 625px;
    background-image: url("../../assets/img/main-bg.png");
    background-size: 100% 100%;
    position: relative;
    .post {
      padding: 10px 250px;
      h1 {
        margin: 40px 0;
        padding-left: 20px;
        border-left: 2px solid #e38134;
        font-family: "Roboto", sans-serif;
        font-size: 50px;
        font-weight: 400;
        color: #fff;
      }
      p {
        margin: 40px 0;
        padding-left: 20px;
        color: #fff;
        font-size: 18px;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
      }
    }
    .to-content-section {
      position: absolute;
      bottom: 60px;
      left: 260px;
      cursor: pointer;
      width: 40px;
      height: 40px;
    }
  }
  .section-2 {
    background: #f0f2f4;
    padding: 60px 250px 0;
    display: flex;
    flex-direction: column;
    h2 {
      padding-left: 10px;
      font-size: 22px;
      font-weight: 340;
      font-family: "Roboto", sans-serif;
    }
    .content {
      display: grid;
      grid: auto-flow 100px / repeat(4, 280px);
      grid-row-gap: 24px;
      grid-column-gap: 20px;
      margin: 20px 0 60px;
      .item-card {
        padding: 15px 15px 15px 30px;
        width: 280px;
        height: 100px;
        background: #fff;
        font-size: 16px;
        font-family: Roboto, sans-serif;
        &:hover {
          box-shadow: 0 0 4px #efe0eb;
          cursor: pointer;
          color: #e38134;
        }
      }
    }
  }
  .section-3 {
    padding: 0 250px;
    h2 {
      margin: 40px 0 0;
      padding-left: 10px;
      padding-bottom: 20px;
      font-size: 22px;
      font-weight: 340;
      font-family: "Roboto", sans-serif;
      border-bottom: 1px solid #e3e3e3;
    }
    .latest-news {
      .news-item {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #e3e3e3;
        span:first-child {
          width: 120px;
          padding-left: 10px;
          display: inline-block;
          margin-right: 10px;
          font-size: 12px;
          font-weight: 300;
        }
        span:nth-child(2) {
          font-size: 16px;
          font-weight: 400;
          cursor: pointer;
        }
      }
    }
    .more-news {
      height: 60px;
      line-height: 60px;
      margin-bottom: 20px;
      img {
        margin: 0 10px;
      }
      a {
        font-size: 18px;
        color: #e38134;
      }
    }
  }
}
</style>
